<template>
  <div class="add-contract-container layout-padding">
    <el-page-header @back="router.back()">
      <template #content> 活动订单详情 </template>
    </el-page-header>
    <el-card shadow="hover" class="layout-padding-auto" style="margin-top: 16px">
      <el-skeleton style="margin-top: 20px" :loading="loading" animated>
        <template v-if="detail">
          <div class="contract-banner">
            <div class="contract-name-head">
              <el-space>
                <span class="contract-name">{{
                  activityItem?.activity?.name + ' - ' + activityItem.name
                }}</span>
                <span class="order-status" :style="{ color: getStatusColor(detail.status) }"
                  >[{{ ActivityOrderStatusLabel[detail.status] }}]</span
                >
              </el-space>
            </div>
            <div class="contract-created">
              创建时间：{{ formatDate(detail.created_at, 'time') }}
            </div>
            <div class="contract-actions">
              <el-button type="primary" @click="handleUpdateStatus">更新状态</el-button>
            </div>
          </div>
          <div class="the-detail-info">
            <div class="the-detail-info-title">订单信息</div>
            <div class="the-detail-info-content">
              <el-row :gutter="10">
                <el-col :span="8">
                  <div class="the-detail-item">
                    <div class="the-detail-item-title">订单编号：</div>
                    <div class="the-detail-item-content">{{ detail.order_no }}</div>
                  </div>
                  <div class="the-detail-item">
                    <div class="the-detail-item-title">联系人：</div>
                    <div class="the-detail-item-content">{{ detail.contact_name }}</div>
                  </div>
                  <div class="the-detail-item">
                    <div class="the-detail-item-title">核销码：</div>
                    <div class="the-detail-item-content">{{ detail.write_off_code }}</div>
                  </div>
                  <div class="the-detail-item">
                    <div class="the-detail-item-title">机构名称：</div>
                    <div class="the-detail-item-content">{{ detail.org_name || '-' }}</div>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="the-detail-item">
                    <div class="the-detail-item-title">订单金额：</div>
                    <div class="the-detail-item-content">{{ detail.amount }}</div>
                  </div>
                  <div class="the-detail-item">
                    <div class="the-detail-item-title">联系电话：</div>
                    <div class="the-detail-item-content">{{ detail.contact_phone }}</div>
                  </div>
                  <div class="the-detail-item">
                    <div class="the-detail-item-title">核销时间：</div>
                    <div class="the-detail-item-content">
                      {{ formatDate(detail.write_off_time, 'time') }}
                    </div>
                  </div>
                  <div class="the-detail-item">
                    <div class="the-detail-item-title">其它信息：</div>
                    <div class="the-detail-item-content">
                      {{ detail.org_extend_content || '-' }}
                    </div>
                  </div>
                  <!-- <div class="the-detail-item">
                    <div class="the-detail-item-title">备注信息：</div>
                    <div class="the-detail-item-content">{{ detail.remark }}</div>
                  </div> -->
                </el-col>
              </el-row>
            </div>
          </div>
          <div class="the-detail-info">
            <div class="the-detail-info-title">活动信息</div>
            <div class="the-detail-info-content">
              <el-row :gutter="10">
                <el-col :span="8">
                  <div class="the-detail-item">
                    <div class="the-detail-item-title">活动名称：</div>
                    <div class="the-detail-item-content">{{ activityItem.activity.name }}</div>
                  </div>
                  <div class="the-detail-item">
                    <div class="the-detail-item-title">活动地点：</div>
                    <div class="the-detail-item-content">
                      {{ activityItem.activity.area_names }}{{ activityItem.activity.address }}
                    </div>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="the-detail-item">
                    <div class="the-detail-item-title">活动时间：</div>
                    <div class="the-detail-item-content">
                      {{ formatDate(activityItem.activity.start_date) }} -
                      {{ formatDate(activityItem.activity.end_date) }}
                    </div>
                  </div>
                  <div class="the-detail-item">
                    <div class="the-detail-item-title">活动项目：</div>
                    <div class="the-detail-item-content">在结算后{{ fields.pay_days }}天内支付</div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
          <div class="the-detail-info">
            <div class="the-detail-info-title">报名人员</div>
            <div class="the-detail-info-content" style="margin-top: 20px">
              <el-table :data="memberList" border>
                <el-table-column label="姓名" prop="name" show-overflow-tooltip> </el-table-column>
                <el-table-column prop="amount" label="性别">
                  <template #default="scope">
                    {{ GenderLabel[scope.row.gender] }}
                  </template>
                </el-table-column>
                <el-table-column prop="phone" label="手机号"> </el-table-column>
                <el-table-column
                  prop="id_card"
                  label="身份证号"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column prop="address" label="审批时间" show-overflow-tooltip>
                  <template #default="scope">
                    <span>{{ formatDate(scope.row.approve_time, 'time') }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div class="the-detail-info">
            <div class="the-detail-info-title">支付记录</div>
            <div class="the-detail-info-content" style="margin-top: 20px">
              <el-table :data="payRecords" border>
                <el-table-column
                  prop="order_no"
                  label="订单号"
                  width="190"
                  fixed="left"
                ></el-table-column>
                <el-table-column prop="amount" label="金额" width="100" align="right">
                  <template #default="{ row }">
                    {{ row.amount / 100 }}
                  </template>
                </el-table-column>
                <el-table-column prop="transaction_id" label="交易号" width="260">
                </el-table-column>
                <el-table-column prop="success_time" label="成功时间" width="160">
                  <template #default="{ row }">
                    {{ formatDate(row.success_time, 'time') }}
                  </template>
                </el-table-column>
                <el-table-column prop="type" label="支付类型" width="100"> </el-table-column>
                <el-table-column prop="bank_type" label="银行信息" width="120"> </el-table-column>
                <el-table-column prop="created_at" label="创建时间" width="160">
                  <template #default="{ row }">
                    {{ formatDate(row.created_at, 'time') }}
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div class="the-detail-info">
            <div class="the-detail-info-title">退款记录</div>
            <div class="the-detail-info-content" style="margin-top: 20px">
              <el-table :data="refundRecords" border>
                <el-table-column
                  prop="refund_no"
                  label="退款单号"
                  width="190"
                  fixed="left"
                ></el-table-column>
                <el-table-column prop="order_no" label="订单号" width="190"></el-table-column>
                <el-table-column prop="amount_refund" label="退款金额" width="100" align="right">
                  <template #default="{ row }">
                    {{ row.amount_refund / 100 }}
                  </template>
                </el-table-column>
                <el-table-column prop="amount_total" label="总金额" width="100" align="right">
                  <template #default="{ row }">
                    {{ row.amount_total / 100 }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="transaction_id"
                  label="交易号"
                  width="250"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  prop="success_time"
                  label="成功时间"
                  width="180"
                  show-overflow-tooltip
                >
                  <template #default="{ row }">
                    {{ formatDate(row.success_time, 'time') }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="user_received_account"
                  label="退款账户"
                  width="120"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column prop="status" label="状态" width="110">
                  <template #default="{ row }">
                    <el-tag v-if="row.status === WepayRefundStatus.REFUNDING">退款中</el-tag>
                    <el-tag v-else-if="row.status === WepayRefundStatus.CLOSED" type="warning"
                      >已关闭</el-tag
                    >
                    <el-tag v-else-if="row.status === WepayRefundStatus.SUCCESS" type="success"
                      >退款成功</el-tag
                    >
                    <el-tag v-else-if="row.status === WepayRefundStatus.ABNORMAL" type="error"
                      >退款异常</el-tag
                    >
                  </template>
                </el-table-column>
                <el-table-column
                  prop="created_at"
                  label="创建时间"
                  width="160"
                  show-overflow-tooltip
                >
                  <template #default="{ row }">
                    {{ formatDate(row.created_at, 'time') }}
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </template>
      </el-skeleton>
    </el-card>
  </div>
</template>

<script setup lang="ts" name="contractDetail">
import { computed, onMounted, ref } from 'vue';
import { readOneActivityOrder, checkStatus } from '/@/api/activity-order';
import { useRouter } from 'vue-router';
import { useRoute } from 'vue-router';
import { formatDate } from '/@/utils/fomatter';
import { GenderLabel } from '/@/constants';
import { WepayRefundStatus } from '/@/constants/refund-status';
import { ActivityOrderStatus, ActivityOrderStatusLabel } from '/@/constants/activity-order-status';
import { ElMessage } from 'element-plus';

const router = useRouter();
const route = useRoute();

const detail = ref<any>(null);
const loading = ref<boolean>(true);

const fields = computed(() => detail.value?.fields || {});

const orderId = computed(() => {
  return route.query.id as string;
});

onMounted(async () => {
  const { data } = await readOneActivityOrder(orderId.value);
  detail.value = data;
  loading.value = false;
});

const handleUpdateStatus = async () => {
  await checkStatus(orderId.value);
  ElMessage.success('更新成功');
};

const memberList = computed(() => {
  return detail?.value?.members || [];
});

const payRecords = computed(() => {
  return detail?.value?.pay_records || [];
});

const refundRecords = computed(() => {
  return detail?.value?.refund_records || [];
});

const activityItem = computed(() => {
  return detail?.value?.activity_item || {};
});

const getStatusColor = (status: string) => {
  let color = '';

  if (status === ActivityOrderStatus.UNPAY) {
    color = '#F56C6C';
  } else if (status === ActivityOrderStatus.CANCELED || status === ActivityOrderStatus.COMPLETED) {
    color = '#909399';
  } else if (status === ActivityOrderStatus.UN_WRITE_OFF) {
    color = '#E6A23C';
  } else {
    color = '#67C23A';
  }

  return color;
};
</script>

<style scoped lang="scss">
.add-contract-container {
  :deep(.el-card__body) {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: auto;
  }
}

.contract-banner {
  position: relative;
  background: #f7f8fa;
  padding: 20px 15px;
  border-radius: 12px;

  .contract-name-head {
    display: flex;
    align-items: center;
    font-size: 24px;

    .contract-name {
      color: #0d0d0d;
    }
  }
  .contract-created {
    margin-top: 16px;
    font-size: 14px;
    font-weight: normal;
    line-height: 22px;
    color: #4e5969;
  }

  .contract-actions {
    position: absolute;
    right: 15px;
    bottom: 20px;
  }
}
</style>
